<!-- 详情页头部用户信息 -->
<style lang="less">
.show-rei-remind{
  .weui-dialog{
    max-height:85%;
    padding: 10px;
    z-index:1001;
    overflow-y:auto;
  }
  .demo-pic{
    width:200px;
    img{
      width:100%;
    }
  }
  .txt{
    text-align:left;
    line-height:24px;
    h2{
      font-size:16px;
      text-align:center;
      color:#7CA7F3;
    }
  }
}
</style>
<template>
<div class="detail-head displayflex">
  <i class="iconfont icon-remind reim-remind" v-if="showRemind" @click="showDig=true;"></i>
  <div class="pic">
    <user-img></user-img>
  </div>
  <div class="contact flex1">
    <div class="name">{{userInfo.name}}</div>
    <div class="tel">{{userInfo.mobiletel1}}
     <template v-if="userInfo.mobiletel2 && userInfo.mobiletel1 != userInfo.mobiletel2">/ {{userInfo.mobiletel2}}</template></div>
  </div>
  <!-- 说明弹框 -->
  <x-dialog v-model="showDig" class="show-rei-remind" :hide-on-blur="true">
    <div class="txt">
      <h2>填写注意事项，请仔细认真阅读</h2>
      1、报销明细以车票上的时间作为出发时间或到达时间，补助按照工作时间8小时计算（出差时间占工作时间大于4小时的按一天算，小于4小时的按半天算）<br/>
      2、若未关联加班申请单，出差期间的节假日均不享有差旅补助<br/>
      3、一次差旅报销申请以一次出差闭环为标准填写，禁止明细穿插多个闭环。报销明细请按出差时序顺序填写，提交申请前系统会自动判断是否填写了完整的闭环信息<br/>
      4、闭环的结尾，当返回到出发地时，起讫日期（到小时）统一填写开始（出发）时间即可。<br/>
      5、发票的粘贴标准，以示例图片为参照。<br/>
      6、注意当关联了加班申请单时，在填写加班日报销明细时请按加班时长填写满（4小时/8小时），否则会影响补助的计算。<br/>
      7、当出差连续超过1个月，可按月提交报销单，如：<br/>
          第一个月申请单的闭环为工作地=>出发地，时间按月底最后一天的下班时间为准填写，无费用款项；<br/>
          第二个月申请单的开始时间为次月第一天上班时间为准，起讫地点为出发地=>工作地，无费用款项；<br/>
          第三个月之后依此类推；

    </div>
    <div class="demo-pic" @click="show">
      <img src="http://heart.csbr.cn/ContentBiz/OAS/Images/expacc_sample.jpg">
    </div>
  </x-dialog>
  <!-- 预览图片 -->
  <previewer :list="list" ref="previewer"></previewer>
</div>
</template>
<script>
  import userImg from "@/components/share/userImg.vue";
  export default {
    props:{
      showRemind:{
        type:Boolean,
        default:false
      }
    },
    data(){
      return{
        showDig:false,
        list:[{
          src:'http://heart.csbr.cn/ContentBiz/OAS/Images/expacc_sample.jpg'
        }]
      }
    },
    components:{
      userImg
    },
    computed: {
      userInfo(){
        return localStorage.UserInfo?JSON.parse(localStorage.UserInfo):'';
      },
    },
    methods:{
      show () {
        this.$refs.previewer.show(0)
      }
    }
  }
</script>